<template>
  <div :style='{height: "600px", width:"930px",backgroundColor:"#f1f6d3"}' id="myChart"></div>
</template>

<script>
import *as echarts from 'echarts';

export default {
  name: "LCt",
  methods: {
    init() {
      var myChart = echarts.init(document.getElementById("myChart"));
      var option = {
        title: {
          // text: "流程",
        },
        series: [
          {
            type: "graph", //关系图
            layout: "none", // 图的布局 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
            // 'circular' 采用环形布局;'force' 采用力引导布局.
            symbolSize: 100,
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            color: "#6A5ACD",
            label: {  // 关系对象上的标签
              show: true, // 是否显示标签
              fontSize: 16,  // 文本样式
              color: "#e51818",
              position: 'right',
              formatter: '{b}'
              //backgroundColor:'white'
            },
            labelLayout: {
              hideOverlap: true
            },
            //标记的图形。'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            symbol: "circle", //形状
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10], // 关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [4, 10] 表示标记宽为4，高为10。
            edgeLabel: { // 连接两个关系对象的线上的标签
              fontSize: 25,
            },
            // 图
            data: [
              {
                name: "ETH CTP",
                x: 100,
                y: 100,
              },
              {
                name: "B",
                x: 450,
                y: 100,
                tooltip: { //鼠标悬停在节点上时显示的内容
                  show: true,
                  position: "right", //标签位置
                  textStyle: {
                    width: 20,
                  },
                  formatter: function (params) {  //formatter这个参数是用来设置鼠标悬停时显示的内容的。
                    return params.dataType === "node"
                        ? "鼠标悬停的显示的内容"
                        : "哈哈哈哈哈哈哈哈";
                  },
                },
              },
              {
                name: "C",
                x: 800,
                y: 100,
              },
              {
                name: "D",
                x: 450,
                y: 450,
              },
              {
                name: "E",
                x: 100,
                y: 800,
              },
              {
                name: "F",
                x: 450,
                y: 800,
              },
              {
                name: "G",
                x: 800,
                y: 800,
              },
            ],
            // 线
            links: [
              {
                source: 0,
                target: 1,
                symbolSize: [5, 20],
                label: {
                  show: true,
                  position: "middle",
                  formatter: "ETH连接",
                  fontSize: 15,
                },
                lineStyle: {
                  width: 5,
                  curveness: 0.2
                }
              },
              {
                source: "A",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
              },
              {
                source: "B",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
                label: { //线上面显示内容
                  show: true,
                  position: "middle",
                  formatter: "有疑问",
                  fontSize: 15,
                },
              },
              {
                source: "C",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
                label: {
                  show: true,
                  position: "middle",
                  formatter: "完成",
                  fontSize: 15,
                },
              },
              {
                source: "F",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
              },
              {
                source: "G",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
              },
              {
                source: "E",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
              },
              {
                source: "E",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.init();
  }
}
</script>

<style scoped>

</style>